<template>
  <div class="announcement-detail-container">
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/announcement/list' }">信息公告</el-breadcrumb-item>
        <el-breadcrumb-item>信息公告详情页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card shadow="never" class="main-card">
      <h1 class="title">太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目</h1>
      <div class="meta">
        <span class="publisher">发布企业：太原市迎泽区卫生局卫生监督所</span>
        <span class="date">发布时间：2023年04月13日</span>
      </div>
      
      <div class="content">
        <p>为便于供应商及时了解政府采购信息，根据《关于开展政府采购意向公开工作的通知》（财库〔2020〕10号）等有关规定，现将太原市迎泽区卫生局卫生监督所2023年4月至12月采购意向公开如下：</p>
        
        <el-table :data="tableData" border style="width: 100%; margin: 20px 0">
          <el-table-column prop="id" label="序号" width="80" align="center" />
          <el-table-column prop="name" label="采购项目名称" width="180" />
          <el-table-column prop="summary" label="采购需求概况" />
          <el-table-column prop="budget" label="预算金额(元)" width="120" align="right" />
          <el-table-column prop="time" label="预计采购时间" width="120" align="center" />
          <el-table-column prop="forSME" label="是否专门面向中小企业采购" width="180" align="center" />
          <el-table-column prop="remark" label="备注" />
        </el-table>
        
        <p>本次公开的采购意向是本单位政府采购工作的初步安排，具体采购项目情况以相关采购公告和采购文件为准。</p>
      </div>
      
      <div class="attachments">
        <h3>附件：</h3>
        <el-link type="primary" :underline="false" class="attachment-link">
          <el-icon><Document /></el-icon>
          太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目附件
        </el-link>
      </div>
      
      <div class="contact-info">
        <h3>温馨提示：</h3>
        <p>本招标项目仅供付费会员查阅，您的权限不能浏览详细信息，联系工作人员办理会员入网事宜，成为正式会员后方可获取详细的招标公告、报名表格、项目附件及部分项目招标文件等。</p>
        <p>联系人：郝工</p>
        <p>电话：010-68960698</p>
        <p>邮箱：1049263697@qq.com</p>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { Document } from '@element-plus/icons-vue'

const tableData = [
  {
    id: 1,
    name: '公用经费项目',
    summary: '公用经费',
    budget: '***',
    time: '2023年12月',
    forSME: '是',
    remark: '车辆运行维护费'
  }
]
</script>

<style scoped lang="scss">
.announcement-detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
  
  .header {
    margin-bottom: 20px;
    
    .el-breadcrumb {
      font-size: 16px;
    }
  }
  
  .main-card {
    border-radius: 4px;
    padding: 20px;
    
    .title {
      font-size: 22px;
      color: #333;
      text-align: center;
      margin-bottom: 15px;
    }
    
    .meta {
      text-align: center;
      margin-bottom: 30px;
      color: #666;
      
      .publisher {
        margin-right: 20px;
      }
    }
    
    .content {
      line-height: 1.8;
      color: #333;
      margin-bottom: 30px;
      
      p {
        margin-bottom: 15px;
      }
    }
    
    .attachments {
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px dashed #ddd;
      
      h3 {
        margin-bottom: 15px;
      }
      
      .attachment-link {
        display: inline-flex;
        align-items: center;
        
        .el-icon {
          margin-right: 8px;
        }
      }
    }
    
    .contact-info {
      margin-top: 40px;
      padding: 20px;
      background-color: #f8f8f8;
      border-radius: 4px;
      
      h3 {
        margin-bottom: 15px;
      }
      
      p {
        margin-bottom: 10px;
        line-height: 1.6;
      }
    }
  }
}
</style>